<!DOCTYPE html>
<html>
  <head>
    <title>Four-dimensional hypercube visualization</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <script>
      const state = 200

      const simpleFunc = function (delay = 1000) {
        setTimeout(() => {
          this.readyStatus = state
          this.onReady()
        }, delay)
      }
      simpleFunc.prototype.onReady = function () {}
      // 1、基本用法
      // promise会立即执行，参见js执行顺序
      const _promise = new Promise((resolve, reject) => {
        const req = new simpleFunc()
        req.onReady = function () {
          if (req.readyStatus == 200) {
            resolve('resolve: 一些数据')
          } else {
            reject('reject: 报错拉！')
          }
        }
      })
      //   2、then
      //   promise.then(resolve, reject)
      _promise.then((data) => {
        console.log('.then 1000:', data)
      })
      //   3、catch
      //   相当于promise.then(null, reject)或promise.then(undefined, reject)
      _promise.catch((error) => {
        console.log('.catch: 完啦', error)
      })
      //   4、finally
      //   finally函数不接受参数，意味着无法知道状态，即该函数应该与状态无关
      _promise.finally(() => {
        console.log('finally 1000')
      })
      //   5、Promise.all(params) 将多个promise合成为一个promise
      //   @params 只接收Iterator 接口类型数据
      //   只有所有promise变成fulfilled，或者任意一个reject，才会触发promise.all后面的回调
      //   当有reject时，会将第一个返回的reject实例返回给catch作为参数
      const _promise1 = new Promise((resolve, reject) => {
        const req = new simpleFunc(700)
        req.onReady = function () {
          if (req.readyStatus == 200) {
            resolve('resolve: 700')
          } else {
            reject('reject: 700')
          }
        }
      })
      const _promise2 = new Promise((resolve, reject) => {
        const req = new simpleFunc(1200)
        req.onReady = function () {
          if (req.readyStatus == 200) {
            resolve('resolve: 1200')
          } else {
            reject('reject: 1200')
          }
        }
      })
      _promise1.then((data) => console.log('then 700:', data))
      _promise2.then((data) => console.log('then 1200:', data))

      const promiseAll = Promise.all([_promise1, _promise2])
      promiseAll
        .then(() => {
          console.log('全部完成了！')
        })
        .catch((error) => {
          console.log('error: ', error)
        })
      //   6、Promise.race(params) 与all类似，只不过有一个能率先改变状态，就将之返回，并将race置为那个状态
      //   7、Promise.allSettled() 与all类似，只不过不需要全部成功，只要全部完成就可以触发  ES2020
      //   8、Promise.any() 与race类似，任意一个fulfilled就fulfilled；否则全部rejected，就是rejected。与race不同的是，any必须等待全部执行完成  ES2021
      //   9、Promise.resolve，将现有对象转化为promise对象
      //   10、Promise.reject(err)，返回一个promise，该promise的reject仿佛的参数，将一直是err字符串
    </script>
  </body>
</html>
